<template>
    <a-layout class="h-full">
        <a-layout-header class="flex p-0" style="height: 50px; line-height: 50px" v-if="state.store.config.plateStyle !== 'compact'">
            <menu-head></menu-head>
        </a-layout-header>
        <a-layout>
            <div v-if="state.store.config.plateStyle === 'compact' && !state.store.config.menuLock" style="width: 50px"></div>
            <a-layout-sider @mouseover="mousehover(false)" @mouseleave="mousehover(true)" :style="state.store.config.plateStyle === 'compact' && !state.store.config.menuLock ? `position: absolute;height:100%; left: 0;top: 0;z-index: 999;box-shadow: 0 0 15px ${state.store.config.isDark ? '#57534E' : '#D4D4D4'};` : ''" v-if="state.showMenu" :class="state.store.menu.collapsed ? 'system_menuMin relative' : 'system_menuMax relative'" :collapsed="state.store.menu.collapsed" :trigger="null" collapsible>
                <menu-left type="inline" />
            </a-layout-sider>
            <a-layout class="overflow-hidden">
                <a-layout-content class="h-full flex flex-col overflow-hidden">
                    <a-layout-header class="flex p-0" :style="state.store.config.plateStyle === 'topMenu' && state.store.config.showTabs == true ? 'height:50px;line-height: 50px;margin-bottom: 5px;' : 'height:50px;line-height: 50px;'" v-if="state.store.config.plateStyle === 'compact'">
                        <menu-head></menu-head>
                    </a-layout-header>
                    <div class="flex flex-col h-full overflow-hidden" id="main">
                        <routerTab @refresh="refresh" v-if="state.store.config.showTabs"></routerTab>
                        <!-- 面包屑导航 -->
                        <div class="p-2 pb-0" v-if="state.store.config.showBreadcrumb">
                            <a-breadcrumb separator=">">
                                <a-breadcrumb-item><a @click="$router.push('/')">首页</a></a-breadcrumb-item>
                                <a-breadcrumb-item v-for="(item, index) in state.breadcrumbData" :key="index">
                                    <a @click="clickLink(item.path)">{{ item.name }}</a>
                                </a-breadcrumb-item>
                            </a-breadcrumb>
                        </div>
                        <!-- routerView -->
                        <router-view :class="'w-full h-full animate__animated ' + state.routerAnimate" v-if="state.routerShow"></router-view>
                        <div v-if="!state.routerShow" class="w-full h-full flex-center">
                            <a-spin />
                        </div>
                    </div>
                </a-layout-content>
            </a-layout>
        </a-layout>
        <themeConfig ref="themeConfigRef"></themeConfig>
    </a-layout>
</template>
<script setup>
import menuHead from '@/components/antdesign/menus/head.vue'
import menuLeft from '@/components/antdesign/menus/menuLeft.vue'
const state = reactive({
    themeConfigRef: null, //主题设置弹层
    routerTab: null, //多页签实例
    routerShow: true, //路由无痕刷新
    routerAnimate: undefined, //路由切换动画
    showMenu: false, //拆分模式下，如果子菜单无数据，则隐藏
    breadcrumbData: [], //面包屑导航数据
    store: useStore(), //状态
    router: useRouter(), //路由
    route: useRoute(),
})

// ===================初始化=====================
init()
function init() {
    const { config } = state.store
    state.routerAnimate = config?.routerAnimate ?? undefined
    findIncludeChildren(useRoute().path)
    //网站配置窗口
    if (!config.menuTheme) {
        config.menuTheme = 'normal'
    }
    const { showTabs = true } = config
    config.showTabs = showTabs
    //定制主题
    ConfigProvider.config({
        theme: {
            primaryColor: config.primaryColor || '#1890ff',
        },
    })
}

// 监听路由动画变化以及主题配置面板
const { model, config } = state.store
const unwatch = watch([() => model.themeShow, () => config.routerAnimate], async ([themeShow, routerAnimate], [oldThemeShow, oldRouterAnimate]) => {
    if (themeShow && themeShow !== oldThemeShow) {
        state.themeConfigRef.openModel()
    }
    if (routerAnimate !== oldRouterAnimate) {
        state.routerAnimate = ''
        await new Promise(resolve => setTimeout(resolve, 100))
        state.routerAnimate = routerAnimate
    }
})
onBeforeUnmount(unwatch)

// ====================动作======================
function mousehover(type) {
    if (state.store.config.plateStyle === 'compact' && !state.store.config.menuLock) {
        state.store.menu.collapsed = type
    }
}
//刷新当前路由
const refresh = val => {
    state.routerShow = false
    setTimeout(() => (state.routerShow = true), 150)
}

//路由切换
function clickLink(key) {
    const target = state.router.options.routes[0].children.find(element => element.path === key && element.children?.length)
    const path = target?.children[0]?.path || key
    state.router.push({ path })
}

//面包屑路由跳转
state.breadcrumbData = routeLink(useRoute().path)
function routeLink(paths) {
    let menuArr = XEUtils.clone(state.router.options.routes[0].children, true)
    return XEUtils.toTreeArray(XEUtils.searchTree(menuArr, item => item.path === paths))
}

//查找当前路由是否包含子路由，如果不包含则隐藏左侧菜单
function findIncludeChildren(path) {
    if (state.store.config.plateStyle === 'position') {
        if (path) {
            const num = (path.match(/\//g) || []).length
            if (num > 1) {
                state.showMenu = true
            } else {
                state.showMenu = false
            }
        }
    } else if (state.store.config.plateStyle === 'topMenu') {
        state.showMenu = false
    } else {
        state.showMenu = true
    }
}

watch(
    () => state.store.config.plateStyle,
    newArr => {
        findIncludeChildren(state.route.path)
    },
    { deep: false, immediate: false }
)

//多页签路由栈
const setRouterData = to => {
    let routerTabs = []
    if (state.store.menu.routerTabs && state.store.menu.routerTabs.length) {
        state.store.menu.routerTabs.forEach(element => {
            if (element.title !== '') routerTabs.push(element)
        })
    }
    routerTabs.push({
        title: to.meta.title,
        path: to.path,
    })
    const newArr = _.uniqWith(routerTabs, _.isEqual)
    state.store.menu.routerTabs = newArr
}
setRouterData(state.route)
onBeforeRouteUpdate(to => {
    state.breadcrumbData = routeLink(to.path)
    findIncludeChildren(to.path)
    state.routerAnimate = state.store.config.routerAnimate
    setRouterData(to)
})
const { themeConfigRef } = toRefs(state)
</script>
<style>
.system_menuMax {
    max-width: 200px !important;
    min-width: 200px !important;
    width: 200px !important;
    overflow-y: auto;
}
.system_menuMin {
    max-width: 50px !important;
    min-width: 50px !important;
    width: 50px !important;
    overflow-y: auto;
}
</style>
